<template>
  <div class="my-server">
    <ul class="myserver">
      <li class="pay">
        <div class="icon" @click="ToPay"></div>
        待付款
      </li>
      <li class="resolve">
        <div class="icon" @click="ToTake"></div>
        待收货
      </li>
      <li class="fix">
        <div class="icon"></div>
        退换修
      </li>
    </ul>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'MyServer',
  computed: mapGetters('user', ['isLogined']),
  methods: {
    ToPay () {
      if (this.isLogined) {
        this.$router.push({ name: 'myorder', query: { type: 1 } })
      } else {
        this.$router.push({ name: 'login' })
      }
    },
    ToTake () {
      if (this.isLogined) {
        this.$router.push({ name: 'myorder', query: { type: 2 } })
      } else {
        this.$router.push({ name: 'login' })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .my-server {
    ul {
      font-size: 0.065rem;
      padding: 0 0.4rem;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
    li {
      padding: 0.2rem 0;
    }
    .pay {
      .icon {
        width: 0.24rem;
        height: 0.24rem;
        margin: 0 auto 0.08rem;
        background: url('@/assets/my-server1.png') no-repeat center 0;
        background-size: 100% auto;
      }
    }
    .resolve {
      .icon {
        width: 0.24rem;
        height: 0.24rem;
        margin: 0 auto 0.08rem;
        background: url('@/assets/my-server2.png') no-repeat center 0;
        background-size: 100% auto;
      }
    }
    .fix {
      .icon {
        width: 0.24rem;
        height: 0.24rem;
        margin: 0 auto 0.08rem;
        background: url('@/assets/my-server3.png') no-repeat center 0;
        background-size: 100% auto;
      }
    }
  }
}
</style>
